<template>
  <div class="container">
    <el-card>
      <!-- 顶部标题 -->
      <el-row>
        <el-col>
          <span>试题录入</span>
        </el-col>
      </el-row>
      <hr class="hr-line" />

      <!-- 顶部搜索表单 -->
      <el-form
        :model="ruleForm"
        m
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <!-- 学科下拉框 -->
        <el-form-item label="学科:" prop="subject">
          <el-select
            v-model="ruleForm.subject"
            placeholder="请选择"
            style="width: 400px"
          >
            <el-option
              v-for="item in subList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.subjectName"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录下拉框 -->
        <el-form-item label="目录:" prop="catalog">
          <el-select
            v-model="ruleForm.catalog"
            placeholder="请选择"
            style="width: 400px"
          >
            <el-option
              v-for="item in dirList"
              :key="item.id"
              :label="item.directoryName"
              :value="item.directoryName"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 企业下拉框 -->
        <el-form-item label="企业:" prop="company">
          <el-select
            v-model="ruleForm.company"
            placeholder="请选择"
            style="width: 400px"
          >
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.company"
              :value="item.company"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市下拉框 -->
        <el-form-item label="城市:" prop="province">
          <el-select
            @change="cityChange"
            v-model="ruleForm.province"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="(item, index) in provincesList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            v-model="ruleForm.city"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="(item, index) in citysList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 方向下拉框 -->
        <el-form-item label="方向:" prop=" direction">
          <el-select
            v-model="ruleForm.direction"
            placeholder="请选择"
            style="width: 400px"
          >
            <el-option
              v-for="(item, index) in direction"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 题型 单选框-->
        <el-row>
          <el-col>
            <el-form-item label="题型:" prop="questionType">
              <el-radio v-model="ruleForm.questionType" label="1"
                >单选</el-radio
              >
              <el-radio v-model="ruleForm.questionType" label="2"
                >多选</el-radio
              >
              <el-radio v-model="ruleForm.questionType" label="3"
                >简答</el-radio
              >
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 难度单选框 -->
        <el-row>
          <el-col>
            <el-form-item label="难度:" prop="difficulty">
              <el-radio label="1" v-model="ruleForm.difficulty">简单</el-radio>
              <el-radio label="2" v-model="ruleForm.difficulty">一般</el-radio>
              <el-radio label="3" v-model="ruleForm.difficulty">困难</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 题干富文本编辑器 -->
        <el-row>
          <el-col>
            <el-form-item label="题干:" prop="question">
              <quill-editor
                style="height: 200px"
                v-model="ruleForm.question"
              ></quill-editor>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 单选选项答案 -->

        <el-row style="margin-top: 40px" v-if="ruleForm.questionType == 1">
          <el-col>
            <el-form-item label="选项：" prop="selection">
              <el-row style="margin-top: 15px">
                <el-col :span="1">
                  <el-radio-group v-model="radio">
                    <el-radio :label="1">A:</el-radio>
                  </el-radio-group>
                </el-col>
                <el-col :span="5">
                  <el-input
                    v-model="ruleForm.code"
                    placeholder="请输入内容"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  <el-upload class="upload-demo" action="#" multiple :limit="3">
                    <el-button class="imgBtn">上传图片</el-button>
                  </el-upload>
                </el-col>
              </el-row>
              <el-row style="margin-top: 15px">
                <el-col :span="1">
                  <el-radio-group v-model="radio">
                    <el-radio :label="2">B:</el-radio>
                  </el-radio-group>
                </el-col>
                <el-col :span="5">
                  <el-input
                    v-model="ruleForm.code"
                    placeholder="请输入内容"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  <el-upload class="upload-demo" action="#" multiple :limit="3">
                    <el-button class="imgBtn">上传图片</el-button>
                  </el-upload>
                </el-col>
              </el-row>
              <el-row style="margin-top: 15px">
                <el-col :span="1">
                  <el-radio-group v-model="radio">
                    <el-radio :label="3">C:</el-radio>
                  </el-radio-group>
                </el-col>
                <el-col :span="5">
                  <el-input
                    v-model="ruleForm.code"
                    placeholder="请输入内容"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  <el-upload class="upload-demo" action="#" multiple :limit="3">
                    <el-button class="imgBtn">上传图片</el-button>
                  </el-upload>
                </el-col>
              </el-row>
              <el-row style="margin-top: 15px">
                <el-col :span="1">
                  <el-radio-group v-model="radio">
                    <el-radio :label="4">D:</el-radio>
                  </el-radio-group>
                </el-col>

                <el-col :span="5">
                  <el-input
                    v-model="ruleForm.code"
                    placeholder="请输入内容"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  <el-upload class="upload-demo" action="#" multiple :limit="3">
                    <el-button class="imgBtn">上传图片</el-button>
                  </el-upload>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 多选 -->
        <el-row style="margin-top: 40px" v-if="(ruleForm.questionType = 2)">
          <el-col>
            <el-form-item label="选项：" prop="selection">
              <el-row style="margin-top: 15px">
                <el-col :span="1">
                  <el-checkbox :label="1">A:</el-checkbox>
                </el-col>
                <el-col :span="5">
                  <el-input
                    v-model="ruleForm.code"
                    placeholder="请输入内容"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  <el-upload class="upload-demo" action="#" multiple :limit="3">
                    <el-button class="imgBtn">上传图片</el-button>
                  </el-upload>
                </el-col>
              </el-row>
              <el-row style="margin-top: 15px">
                <el-col :span="1">
                  <el-checkbox :label="2">B:</el-checkbox>
                </el-col>
                <el-col :span="5">
                  <el-input
                    v-model="ruleForm.code"
                    placeholder="请输入内容"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  <el-upload class="upload-demo" action="#" multiple :limit="3">
                    <el-button class="imgBtn">上传图片</el-button>
                  </el-upload>
                </el-col>
              </el-row>
              <el-row style="margin-top: 15px">
                <el-col :span="1">
                  <el-checkbox :label="3">C:</el-checkbox>
                </el-col>
                <el-col :span="5">
                  <el-input
                    v-model="ruleForm.code"
                    placeholder="请输入内容"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  <el-upload class="upload-demo" action="#" multiple :limit="3">
                    <el-button class="imgBtn">上传图片</el-button>
                  </el-upload>
                </el-col>
              </el-row>
              <el-row style="margin-top: 15px">
                <el-col :span="1">
                  <el-checkbox :label="4">D:</el-checkbox>
                </el-col>
                <el-col :span="5">
                  <el-input
                    v-model="ruleForm.code"
                    placeholder="请输入内容"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  <el-upload class="upload-demo" action="#" multiple :limit="3">
                    <el-button class="imgBtn">上传图片</el-button>
                  </el-upload>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button type="danger" plain size="small" class="selectBtn"
          >+增加选项与答案</el-button
        >
        <!-- 解析视频 -->
        <el-row style="margin-top: 25px">
          <el-col :span="8">
            <el-form-item prop="videoAnswer">
              <span slot="label" class="solution">解析视频：</span>
              <el-input v-model="ruleForm.videoAnswer"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 答案解析 -->
        <el-row>
          <el-col>
            <el-form-item prop="answer">
              <span slot="label" class="solution">答案解析：</span>
              <quill-editor
                style="height: 200px"
                v-model="ruleForm.answer"
              ></quill-editor>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 题目备注 -->
        <el-row style="margin-top: 60px">
          <el-col :span="8">
            <el-form-item label="题目备注:" prop="remarks">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="ruleForm.remarks"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 试题标签 -->
        <el-row>
          <el-col :span="10">
            <el-form-item label="试题标签:" prop="remarks">
              <el-select
                v-model="ruleForm.remarks"
                placeholder="请选择试题标签"
                style="width: 350px"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 80px">
          <el-col>
            <el-button type="primary">确认提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { list } from "@/api/hmmm/subjects.js";
import { list as directorylist } from "@/api/hmmm/directorys";
import { list as companyList } from "@/api/hmmm/companys";
import { provinces, citys } from "@/api/hmmm/citys";
import { difficulty, questionType, direction } from "@/api/hmmm/constants";
export default {
  name: "questions-new",
  data() {
    return {
      ruleForm: {
        //  学科
        subject: "",
        // 目录
        catalog: "",
        // 企业
        company: "",
        // 城市
        city: "",
        province: "",
        // 方向
        direction: "",
        // 题型
        questionType: "1",
        // 难度
        difficulty: "1",
        // 题干
        question: "",
        // 答案解析
        answer: "",
        // 树形选项
        selection: "",
        // 竖型文本框
        code: "",
        // 解析视频
        videoAnswer: "",
        // 题目备注
        remarks: "",
      },
      radio: "",
      subList: [], //学科列表
      dirList: [], //目录列表
      companyList: [], //公司列表
      provincesList: provinces(), //省份，调用的是一个函数
      citysList: [], //区域
      direction: direction, //方向
    };
  },
  created() {
    this.getUserlist(); //学科列表
    this.getDirectorylist(); //目录列表
    this.getCompanyList(); //公司列表
  },
  methods: {
    // 获取学科列表
    async getUserlist() {
      const { data } = await list();
      //  console.log(data);
      this.subList = data.items;
    },
    // 获取目录列表
    async getDirectorylist() {
      try {
        const { data } = await directorylist();
        // console.log(data);
        this.dirList = data.items;
      } catch (err) {
        this.$message("获取目录列表失败！");
      }
    },
    // 获取公司列表
    async getCompanyList() {
      const { data } = await companyList();
      // console.log(data);
      this.companyList = data.items;
    },
    // 根据城市获取区域
    cityChange(val) {
      // console.log(val);
      this.ruleForm.city = "";
      this.citysList = citys(val);
    },
  },
};
</script>

<style scoped lang='scss'>
.hr-line {
  color: #ebeef5;
}
.imgBtn {
  border: 1px dashed #ccc;
  margin-left: 5px;
}
.selectBtn {
  color: #fff;
  background-color: #fab6b6;
  margin-left: 75px;
}
.solution {
  display: inline-block;
  width: 80px;
}
</style>
